<template>
    <el-config-provider :locale="locale">
        <el-container>
            <el-header class="my_el_header">
                <!-- 头部 -->
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside style="height: calc(100vh - 50px);width:200px">
                    <el-menu :tree="true" active-text-color="#1E9FFF" :default-active="$route.path"
                        :default-openeds="$store.state.openedMenuIds">
                        <LeftMenu :item="item" v-for="item in $store.state.leftMenuTree" :key="item.id"></LeftMenu>
                    </el-menu>
                </el-aside>
                <el-main style="">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </el-config-provider>
</template>

<script setup>
import { ref, computed, onMounted } from "vue"
import Header from '@/components/Header.vue'
import LeftMenu from '@/components/LeftMenu.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
</script>
<style>
.el-header {
    --el-header-height: 50px;
}

.el-main {
    background-color: #ecf0f5;
    padding: 10px;
}

.el-menu {
    height: 100%;
}
</style>
